<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS选择器获取HTML元素</title>
	</head>
	<body>
		<ul>
			<li class="imooc-name">慕课网1</li>
			<li class="imooc-name">慕课网2</li>
			<li class="imooc-name">慕课网3</li>
			<li class="box">慕课网4</li>
			<li>慕课网5</li>
		</ul>

		<ol>
			<li id="imooc">程序员的梦工厂1</li>
			<li class="box">程序员的梦工厂2</li>
			<li>程序员的梦工厂3</li>
			<li>程序员的梦工厂4</li>
			<li>程序员的梦工厂5</li>
		</ol>
		<script>
			var li = document.querySelector('#imooc');
			console.log(li);
			var imoocName = document.querySelector('.imooc-name')
			console.log(imoocName);
			// 我们使用querySelector的时候，无论元素的多与少，都给我们返回第一个
			var imoocNames = document.querySelectorAll('.imooc-name');
			console.log(imoocNames);
			
			var box = document.querySelector('ul .box');
			console.log(box);
			var box = document.querySelectorAll('ul .box');
			console.log(box);
			
		</script>
	</body>
</html>